/**
 * aqiData，存储用户输入的空气指数数据
 * 示例格式：
 * aqiData = {
 *    "北京": 90,
 *    "上海": 40
 * };
 */
var aqiData = {};

/**
 * 从用户输入中获取数据，向aqiData中增加一条数据
 * 然后渲染aqi-list列表，增加新增的数据
 */
function addAqiData() {
	var city = document.getElementById('aqi-city-input').value;
	var value = document.getElementById('aqi-value-input').value;
	if(!city.match(/^[a-zA-Z\u4e00-\u9fa5]+$/)){
		alert("城市名必须是中文或英文");
		return;
	}
	if(!value.match(/^[\d]+$/)){
		alert("空气指数必须是整数");
		return;
	}
	aqiData[city] = value;
}

/**
 * 渲染aqi-table表格
 */
function renderAqiList() {
	var table = document.getElementById('aqi-table');
	var template = '<td>城市</td><td>空气质量</td><td>操作</td>';
	 for(var city in aqiData){
        template += "<tr><td>" + city +"</td><td>" + aqiData[city] + '<td><button onclick= "delBtnHandle(\''+city+'\')">删除</button></td>';
    }
    document.getElementById("aqi-table").innerHTML = template; 
}

/**
 * 点击add-btn时的处理逻辑
 * 获取用户输入，更新数据，并进行页面呈现的更新
 */
function addBtnHandle(){
  addAqiData();
  console.log(aqiData);
  renderAqiList();
}

/**
 * 点击各个删除按钮的时候的处理逻辑
 * 获取哪个城市数据被删，删除数据，更新表格显示
 */
function delBtnHandle(city) {
    // do sth.
	console.log(city);
	if (confirm("是否删除此条信息")) {
		delete aqiData[city];
    }
    renderAqiList();
}

function init() {

  // 在这下面给add-btn绑定一个点击事件，点击时触发addBtnHandle函数

  // 想办法给aqi-table中的所有删除按钮绑定事件，触发delBtnHandle函数
    var addBtn = document.getElementById("add-btn");
    addBtn.addEventListener("click", addBtnHandle);
}

init();
